<script setup>
import { reactive, computed } from 'vue'

const author = reactive({
    name: 'John Doe',
    books: [
        'Vue 2 - Advanced Guide',
        'Vue 3 - Basic Guide',
        'Vue 4 - The Mystery'
    ]
})

// 一个计算属性 ref
const publishedBooksMessage = computed(() => {
    return author.books.length > 0 ? '有书' : '没有书'
})
</script>

<template>
    <div>
        <p>臃肿的代码结构:</p>
        <span style="font-family: Arial, sans-serif;font-size: large;">{{ author.books.length > 0 ? '有书' : '没有书'}}</span>
    </div>
    <br/>
    <div>
        <p>计算属性函数话 优化臃肿的代码</p>
        <span style="font-family: Arial, sans-serif;font-size: large;">{{ publishedBooksMessage }}</span>
    </div>
</template>

<style scoped>
  @font-face {
    font-family: "MyCustomFont";
    src: url("mycustomfont.woff") format("woff");
  }
  p {
    font-family: "MyCustomFont", sans-serif;
  }
</style>